import React, { PureComponent } from 'react';
import { Input, Grid, Button } from '@alifd/next';

// form binder 详细用法请参见官方文档
import {
    FormBinderWrapper as IceFormBinderWrapper,
    FormBinder as IceFormBinder,
} from '@icedesign/form-binder';

const { Row, Col } = Grid;

export default class Filter extends PureComponent {
  static displayName = 'Filter';

  render() {
      return (
          <IceFormBinderWrapper
              value={this.props.value}
              onChange={this.props.onChange}
          >
              <div>
                  <Row wrap>
                      <Col xxs={24} xs={12} l={8} style={styles.filterCol}>
                          <label style={styles.filterTitle}>方案名称</label>
                          <IceFormBinder name="name">
                              <Input />
                          </IceFormBinder>
                      </Col>
                      <Col xxs={24} xs={12} l={8} style={styles.filterCol}>
                          <label style={styles.filterTitle}>地图名称</label>
                          <IceFormBinder name="mapName">
                              <Input />
                          </IceFormBinder>
                      </Col>
                  </Row>
                  <div
                      style={{
                          textAlign: 'left',
                          marginLeft: '12px',
                      }}
                  >
                      <Button
                          onClick={this.props.onSubmit}
                          type="primary"
                          style={{ marginLeft: '10px' }}
                      >
              确定
                      </Button>
                      &nbsp; &nbsp;
                      <Button
                          onClick={()=>{
                              window.location.href='#/battle/set/create'
                          }}
                          type="primary"
                          warning
                          style={{ marginLeft: '10px' }}
                      >
              新建方案
                      </Button>
                  </div>
              </div>
          </IceFormBinderWrapper>
      );
  }
}

const styles = {
    filterCol: {
        display: 'flex',
        alignItems: 'center',
        marginBottom: '20px',
    },

    filterTitle: {
        width: '68px',
        textAlign: 'right',
        marginRight: '12px',
        fontSize: '14px',
    },

    filterTool: {
        width: '200px',
    },
};
